<template>
	<view class="page-photo-print-confirm">
		<view v-if="!addressObj" class="add-address flex-center" @tap="toAddress">
			<text class="add-icon">+</text>
			<text class="add-text">添加收货地址</text>
		</view>
		<view v-else @tap="toAddress" class="address-item flex-between-center">
			<view class="left-info">
				<text class="normal-title-bold">{{ addressObj.area }}{{ addressObj.address }}</text>
				<text class="desc">{{ addressObj.consignee }}&nbsp;&nbsp;{{ addressObj.phone }}</text>
			</view>
			<u-icon @tap.stop="toAddress" color="rgba(229, 229, 229, 1)" name="arrow-right"></u-icon>
		</view>
		<u-gap height="10"></u-gap>
		<view class="photo-info">
			<view class="photo-wrap">
				<view class="photo-box">
					<image src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/photo/shenghuozhao.png" mode="widthFix"></image>
				</view>
			</view>
			<u-gap height="16"></u-gap>
			<view>
				<text class="photo-name">生活照打印</text>
			</view>
			<u-gap height="16"></u-gap>
			<view class="flex-column-gap-5">
				<view class="detail-item">
					<text>照片尺寸</text>
					<text class="desc-14">{{ detailInfo.size.name }}</text>
				</view>

				<view class="detail-item">
					<text>冲印数量</text>
					<text class="desc-14">{{ detailInfo.count.name }}</text>
				</view>
				<view class="detail-item">
					<text>冲印材质</text>
					<text class="desc-14">{{ detailInfo.meterial.name }}</text>
				</view>
				<view class="detail-item">
					<text>邮寄方式</text>
					<text class="desc-14">{{ detailInfo.express.name }}</text>
				</view>
			</view>
			<u-gap height="16"></u-gap>
			<view class="split-line"></view>
			<u-gap height="16"></u-gap>
			<view class="flex-column-gap-5">
				<view class="detail-item">
					<text>商品金额</text>
					<text>
						<text class="origin-price mr-4">{{ goodAmount }}元</text>
						<text>{{ goodDiscount }}元</text>
					</text>

				</view>
				<view class="detail-item">
					<text>运费金额</text>
					<text>
						<text class="origin-price mr-4">{{ detailInfo.express.amount }}元</text>
						<text>{{ detailInfo.express.discount }}元</text>
					</text>

				</view>
				<view class="detail-item">
					<text>优惠金额</text>
					<text>{{ difAmount }}元</text>
				</view>
			</view>
			<u-gap height="16"></u-gap>
			<view class="split-line"></view>
			<u-gap height="16"></u-gap>
			<view class="detail-item bold">
				<text>合计</text>
				<text>{{ payAmount / 100 }}元</text>
			</view>
		</view>

		<view class="pay-box">
			<view class="text-box">
				<text>应付款：</text>
				<text class="amount">&yen;{{ payAmount / 100 }}</text>
			</view>
			<view class="pay-btn">
				<view class="custom-button full-button" @tap="onPay">
					<u-button type="primary" shape="circle" text="确认支付"></u-button>
				</view>
			</view>

		</view>
	</view>
	<custom-pay-popup v-model:show="showPayPopup" :payAmount="payAmount" @pay="onConfirmPay" @paySuccess="onPaySuccess" />
</template>

<script setup>
import CustomPayPopup from "@/components/custom-pay-popup/custom-pay-popup.vue";
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app";
import {
	ref,
	shallowRef,
	reactive,
	computed,
} from "vue";
import {
	directPayPlatforms,
} from '@/common/js/data.js';
import {
	getPaymentType,
} from '@/common/js/method.js';

const loginProvider = uni.getStorageSync('loginProvider');
const customPayPopup = ref(null);
const printNum = ref("1");
const addressObj = shallowRef(null);
const detailInfo = ref({
	size: {},
	count: {},
	meterial: {},
	express: {},
	images: [],
});

const showPayPopup = ref(false);
const expressType = ref("1");

// 计算支付金额（所有服务的折扣价之和）
const payAmount = computed(() => {
	if (!detailInfo.value) return 0;
	const expressPrice = detailInfo.value.express.discount;
	return Number(goodDiscount.value * 100) + Number(expressPrice * 100);
});

// 计算商品原价金额（单价原价乘上数量）
const goodAmount = computed(() => {
	if (!detailInfo.value) return 0;
	const amount = detailInfo.value.meterial.amount;
	const count = detailInfo.value.count.id;
	return Number(amount * 100) * count / 100;
});

// 计算商品金额（单价折扣价乘上数量）
const goodDiscount = computed(() => {
	if (!detailInfo.value) return 0;
	const meterialPrice = detailInfo.value.meterial.discount;
	const count = detailInfo.value.count.id;
	return Number(meterialPrice * 100) * count / 100;
});

// 计算优惠金额（商品原价金额 - 商品金额） + (快递原价 - 快递价格)
const difAmount = computed(() => {
	const expressAmount = detailInfo.value.express.amount;
	const expressDiscount = detailInfo.value.express.discount;
	return ((goodAmount.value * 100 - goodDiscount.value * 100) + (expressAmount * 100 - expressDiscount * 100)) / 100;
});

const toAddress = () => {
	const params = {};
	uni.navigateTo({
		url: `/pages/address/address?data=${JSON.stringify(params)}`,
	});
};


// 查询默认地址
const getDefaultAddress = async () => {
	const res = await uni.$request('/api/user/address/select/default');
	if (res.data) {
		addressObj.value = res.data;
	}
}

const getAddressIfExsit = (item) => {
	const data = uni.getStorageSync('choosedAddresInfo');
	console.log('获取到选择的地址', data);
	if (data) {
		addressObj.value = data;
	}
	uni.removeStorageSync('choosedAddresInfo');
}

// 确认支付
const onConfirmPay = async ({
	type,
	callback,
}) => {
	// 支付需要的信息
	const payInfo = await getPayInfo(type);
	callback(payInfo)

}
// 获取微信支付接口需要的信息
const getPayInfo = async (type) => {
	console.log('detailInfo', detailInfo.value)
	console.log('addressObj', addressObj.value)
	const payType = { beanPay: 0, wxpay: 1, alipay: 2, toutiao: 3 }
	const {
		size,
		count,
		meterial,
		express,
		images,
	} = detailInfo.value;
	let res = await uni.$request('/api/busi/print/addOrder', {
		addressId: addressObj.value.id, //地址id
		packageId: meterial.id, //冲印服务的id
		recordType: 12, //12-生活照打印
		productId: size.id, //主键id
		expressId: express.id,
		payType: payType[type], //支付方式，0-金豆，1-微信，2-支付宝，3-抖音，4-银联
		payAmount: payAmount.value,
		printNum: count.id,
		imageUrl: images.join(','),
	});
	return res.data;
}
const onPay = async () => {
	if(!addressObj.value) {
		uni.$u.toast('请添加收货地址');
		return;
	}
	// 直接调支付的平台
	if(directPayPlatforms.includes(loginProvider)){
		let paymentType = await getPaymentType();
		onConfirmPay({
			type: paymentType,
			callback: async(payInfo) => {
				let res = await uni.$pay(payInfo);
				onPaySuccess(res);
			},
		})
	} else {
		showPayPopup.value = true;
	}
};

const onPaySuccess = async () => {
	// 支付成功，跳转结果页（复用证件照制作结果页）
	uni.navigateTo({
		url: `/pages/make-photo/make-photo-print-res?desc=打印照片会在48小时内发货，请确保收货手机号能正常接收物流信息`,
	})
};


onShow((params) => {
	getAddressIfExsit();
});

onLoad((params) => {
	if (!params.data) return;
	const data = JSON.parse(params.data);
	detailInfo.value = data;
	getDefaultAddress();
});
</script>

<style lang="less" scoped>
.page-photo-print-confirm {
	box-sizing: border-box;
	padding: 20rpx 32rpx 280rpx 32rpx;
	height: 100vh;
	overflow-y: auto;
	opacity: 1;
	background: rgba(245, 245, 245, 1);

	.detail-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/** 文本 */
		font-size: 14px;
		line-height: 20px;
		color: rgba(56, 56, 56, 1);
	}

	.add-address {
		box-sizing: border-box;
		gap: 4px;
		height: 49px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
		padding: 14px 14px 14px 14px;

		.add-icon {
			font-size: 28px;
			color: rgba(166, 166, 166, 1);
			margin-bottom: 3px;
		}

		.add-text {
			margin-top: 4px;
			font-size: 14px;
			line-height: 21px;
			color: rgba(56, 56, 56, 1);
		}
	}

	.address-item {
		border-radius: 8px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
		padding: 16px;

		.left-info {
			display: flex;
			flex-direction: column;
			gap: 10px;

			.address-text {
				font-size: 14px;
				font-weight: 500;
				line-height: 20px;
				color: rgba(56, 56, 56, 1);
			}

			.address-contact {
				font-size: 12px;
				line-height: 18px;
				color: rgba(166, 166, 166, 1);
			}
		}

		.edit-icon {
			width: 24px;
			height: 24px;
		}
	}

	.photo-info {
		box-sizing: border-box;
		// height: 229px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.02);
		padding: 16px 16px 16px 16px;

		.photo-wrap {
			// height: 100px;
			box-sizing: border-box;
			background: rgba(245, 245, 245, 1);
			display: flex;
			justify-content: center;
			align-items: center;

			.photo-box {
				width: 622rpx;
				height: 200rpx;
				image {
					width: 100%;
					height: 100%;
				}

			}
		}

		.photo-name {
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			color: rgba(56, 56, 56, 1);
		}
	}

	.pay-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		height: 212rpx;
		border-radius: 32rpx 32rpx 0 0;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -4rpx 12rpx rgba(0, 0, 0, 0.02);
		padding: 32rpx 32rpx 68rpx 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;

		.text-box {
			font-size: 18px;
			line-height: 27px;
			color: rgba(0, 0, 0, 1);

			.amount {
				font-weight: 700;
				color: rgba(69, 145, 230, 1);
			}
		}

		.pay-btn {
			width: 160px;
		}
	}
}
</style>